<div class="container">
    <div class="row">
        <div class="col-xl-12 main-title">
            <h4>Github: <a href="https://github.com/kevoj/angular-editor-fabric-js">angular-editor-fabric-js</a></h4>
        </div>
        <div class="col-xl-12">
            <div class="row">
                <div class="col-xl-12 text-right">
                    <button data-toggle="tooltip" data-placement="bottom" title="Export to image" type="button" class="btn btn-primary" (click)="rasterize();">
                        <i class="fa fa-download" aria-hidden="true"></i> Export to image</button>
                    <button data-toggle="tooltip" data-placement="bottom" title="Export to SVG" type="button" class="btn btn-primary" (click)="rasterizeSVG();">
                        <i class="fa fa-download" aria-hidden="true"></i> Export to SVG</button>
                    <button data-toggle="tooltip" data-placement="bottom" title="Save in localStorage" type="button" class="btn btn-primary"
                        (click)="saveCanvasToJSON();">
                        <i class="fa fa-save" aria-hidden="true"></i> Save local</button>
                    <button data-toggle="tooltip" data-placement="bottom" title="Load from localStorage" type="button" class="btn btn-primary"
                        (click)="loadCanvasFromJSON();">
                        <i class="fa fa-save" aria-hidden="true"></i> Load local</button>
                    <button data-toggle="tooltip" data-placement="bottom" title="Clean Canvas" type="button" class="btn btn-danger" (click)="confirmClear();">
                        <i class="fa fa-ban" aria-hidden="true"></i> Clean</button>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-xl-3">
            <div class="card">
                <div class="card-header">Size</div>
                <div class="card-body">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" [(ngModel)]="size.width" (keyup)="changeSize()">
                            <div class="input-group-append">
                                <span class="input-group-text">
                                    Width
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" [(ngModel)]="size.height" (keyup)="changeSize()">
                            <div class="input-group-append">
                                <span class="input-group-text">
                                    Height
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br/>
            <div class="card">
                <div class="card-header">Add text</div>
                <div class="card-body">
                    <div class="input-group">
                        <input type="text" class="form-control" [(ngModel)]="textString">
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <button id="add-text" data-toggle="tooltip" data-placement="bottom" title="Add text" class="btn btn-primary" (click)="addText()">
                                    <i class="fa fa-plus" aria-hidden="true"></i>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <br/>
            <div class="card">
                <div class="card-header">Add images</div>
                <div class="card-body max-height">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/pikachu.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/squirtle.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/bullbasaur.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/charmander.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/bellsprout.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/caterpie.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/dratini.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/eevee.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/jigglypuff.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/mankey.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/meowth.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/pidgey.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/psyduck.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/rattata.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/abra.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/snorlax.svg">
                    <img class="images-item" (click)="getImgPolaroid($event)" src="assets/img/zubat.svg">
                </div>
            </div>
            <br/>
            <div class="card">
                <div class="card-header">Upload image</div>
                <div class="card-body text-center">
                    <img id="testImage" *ngIf="url" class="images-item-upload" [src]="url" (click)="addImageOnCanvas(url);">
                    <input type="file" (change)="readUrl($event);">
                    <br/>
                    <br/>
                    <div class="btn-group btn-group-justified" role="group" aria-label="...">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-danger btn-sm" (click)="removeWhite(url);">
                                <i class="fa fa-times" aria-hidden="true"></i> Remove</button>
                        </div>
                    </div>
                </div>
            </div>
            <br/>
            <div class="card">
                <div class="card-header">Add figure</div>
                <div class="card-body text-center max-height">
                    <div class="btn-group btn-group-vertical" role="group" aria-label="...">
                        <button type="button" class="btn btn-primary" (click)="addFigure('rectangle');">Rectangle</button>
                        <button type="button" class="btn btn-primary" (click)="addFigure('square');">Square</button>
                        <button type="button" class="btn btn-primary" (click)="addFigure('triangle');">Triangle</button>
                        <button type="button" class="btn btn-primary" (click)="addFigure('circle');">Circle</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <canvas id="canvas"></canvas>
        </div>
        <div class="col-xl-3">
            <div class="card">
                <div class="card-header">Options</div>
                <div class="card-body text-center">
                    <div class="btn-group" role="group" aria-label="...">
                        <button data-toggle="tooltip" data-placement="bottom" title="Delete element" type="button" class="btn btn-outline-danger" [disabled]="!selected"
                            (click)="removeSelected();">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </button>
                        <button data-toggle="tooltip" data-placement="bottom" title="Send to back" type="button" class="btn btn-outline-primary" [disabled]="!selected"
                            (click)="sendToBack();">
                            <i class="fa fa-level-down" aria-hidden="true"></i>
                        </button>
                        <button data-toggle="tooltip" data-placement="bottom" title="Send to front" type="button" class="btn btn-outline-primary" [disabled]="!selected"
                            (click)="bringToFront();">
                            <i class="fa fa-level-up" aria-hidden="true"></i>
                        </button>
                        <button data-toggle="tooltip" data-placement="bottom" title="Clone" type="button" class="btn btn-outline-primary" [disabled]="!selected || selected.type == 'group'"
                            (click)="clone();">
                            <i class="fa fa-clone" aria-hidden="true"></i>
                        </button>
                        <button data-toggle="tooltip" data-placement="bottom" title="Unselect" type="button" class="btn btn-outline-primary" [disabled]="!selected"
                            (click)="cleanSelect()">
                            <i class="fa fa-remove" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </div>
            <br/>
            <div class="card" *ngIf="!selected">
                <div class="card-header">Canvas</div>
                <div class="card-body">
                    <div class="custom-item" *ngIf="!props.canvasImage">
                        <div class="custom-item-title">Background Color</div>
                        <div class="custom-item-body">
                            <input type="text" class="form-control" [cpPosition]="'bottom'" [(colorPicker)]="props.canvasFill" [style.background]="props.canvasFill"
                                [value]="props.canvasFill" (colorPickerChange)="setCanvasFill()">
                        </div>
                    </div>
                    <div class="custom-item">
                        <div class="custom-item-title">Background Image (url)</div>
                        <div class="custom-item-body">
                            <input type="text" class="form-control" placeholder="http://example.jpg" [(ngModel)]="props.canvasImage" (keyup)="setCanvasImage()">
                        </div>
                    </div>
                </div>
            </div>
            <br/>
            <div class="card">
                <div class="card-header">Custom</div>
                <div class="card-body">
                    <div class="custom-item" *ngIf="selected  && selected.type == 'group'">Group Selected</div>
                    <div class="custom-item" *ngIf="!selected">No items selected</div>
                    <div class="custom-item" *ngIf="selected && selected.type != 'group'">
                        <div class="custom-item-title">ID</div>
                        <div class="custom-item-body">
                            <input type="text" class="form-control" [(ngModel)]="props.id" (keyup)="setId()">
                        </div>
                    </div>
                    <div class="custom-item" *ngIf="selected && selected.type != 'group'">
                        <div class="custom-item-title">Opacity</div>
                        <div class="custom-item-body">
                            <input type="range" [(ngModel)]="props.opacity" (change)="setOpacity()">{{props.opacity}}</div>
                    </div>
                    <div class="custom-item" *ngIf="selected && textEditor || selected && figureEditor">
                        <div class="custom-item-title">Fill</div>
                        <div class="custom-item-body">
                            <input type="text" class="form-control" [cpPosition]="'bottom'" [(colorPicker)]="props.fill" [style.background]="props.fill"
                                [value]="props.fill" (colorPickerChange)="setFill()">
                        </div>
                    </div>
                    <div class="custom-item" *ngIf="selected && textEditor">
                        <div class="custom-item-title">Font family</div>
                        <div class="custom-item-body">
                            <select [(ngModel)]="props.fontFamily" class="form-control" (change)="setFontFamily()">
                                <option value="arial">Arial</option>
                                <option value="helvetica" selected>Helvetica</option>
                                <option value="verdana">Verdana</option>
                                <option value="courier">Courier</option>
                                <option value="Roboto">Roboto</option>
                                <option value="Open Sans">Open Sans</option>
                                <option value="Zilla Slab">Zilla Slab</option>
                                <option value="Lato">Lato</option>
                                <option value="Bellefair">Bellefair</option>
                                <option value="Fresca">Fresca</option>
                                <option value="Raleway">Raleway</option>
                                <option value="Open Sans Condensed">Open Sans Condensed</option>
                                <option value="Indie Flower">Indie Flower</option>
                                <option value="Josefin Sans">Josefin Sans</option>
                                <option value="Inconsolata">Inconsolata</option>
                                <option value="Pacifico">Pacifico</option>
                                <option value="Gloria Hallelujah">Gloria Hallelujah</option>
                            </select>
                        </div>
                    </div>
                    <div class="custom-item" *ngIf="selected && textEditor">
                        <div class="custom-item-title">Text Align</div>
                        <div class="custom-item-body text-center">
                            <div class="btn-group" role="group" aria-label="...">
                                <button type="button" class="btn btn-primary" [ngClass]="{'active': props.textAlign == 'left' }" (click)="setTextAlign('left')">
                                    <i class="fa fa-align-left"></i>
                                </button>
                                <button type="button" class="btn btn-primary" [ngClass]="{'active': props.textAlign == 'center' }" (click)="setTextAlign('center')">
                                    <i class="fa fa-align-center"></i>
                                </button>
                                <button type="button" class="btn btn-primary" [ngClass]="{'active': props.textAlign == 'right' }" (click)="setTextAlign('right')">
                                    <i class="fa fa-align-right"></i>
                                </button>
                                <button type="button" class="btn btn-primary" [ngClass]="{'active': props.textAlign == 'justify' }" (click)="setTextAlign('justify')">
                                    <i class="fa fa-align-justify"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="custom-item" *ngIf="selected && textEditor">
                        <div class="custom-item-title">Style</div>
                        <div class="custom-item-body text-center">
                            <div class="btn-group" role="group" aria-label="...">
                                <button type="button" class="btn btn-primary btn-sm" [ngClass]="{'active': props.fontWeight }" (click)="setBold()">
                                    <i class="fa fa-bold"></i>
                                </button>
                                <button type="button" class="btn btn-primary btn-sm" [ngClass]="{'active': props.fontStyle }" (click)="setFontStyle()">
                                    <i class="fa fa-italic"></i>
                                </button>
                                <button type="button" class="btn btn-primary btn-sm" [ngClass]="{'active': hasTextDecoration('underline') }"
                                    (click)="setTextDecoration('underline')">
                                    <i class="fa fa-underline"></i>
                                </button>
                                <button type="button" class="btn btn-primary btn-sm" [ngClass]="{'active': hasTextDecoration('overline') }"
                                    (click)="setTextDecoration('overline')">
                                    <i class="fa fa-underline fa-flip-vertical"></i>
                                </button>
                                <button type="button" class="btn btn-primary btn-sm" [ngClass]="{'active': hasTextDecoration('line-through') }"
                                    (click)="setTextDecoration('line-through')">
                                    <i class="fa fa-strikethrough"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="custom-item" *ngIf="selected && textEditor">
                        <div class="custom-item-title">Font Size</div>
                        <div class="custom-item-body">
                            <input type="range" [(ngModel)]="props.fontSize" (change)="setFontSize()" step="1" min="1" max="120">{{props.fontSize}}</div>
                    </div>
                    <div class="custom-item" *ngIf="selected && textEditor">
                        <div class="custom-item-title">Line Height</div>
                        <div class="custom-item-body">
                            <input type="range" [(ngModel)]="props.lineHeight" (change)="setLineHeight()" step="0.1" min="0" max="10">{{props.lineHeight}}</div>
                    </div>
                    <div class="custom-item" *ngIf="selected && textEditor">
                        <div class="custom-item-title">Char Spacing</div>
                        <div class="custom-item-body">
                            <input type="range" [(ngModel)]="props.charSpacing" (change)="setCharSpacing()" step="10" min="-200" max="800">{{props.charSpacing}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12">
            <br/>
            <div class="card">
                <div class="card-header">
                    <button type="button" class="btn btn-primary btn-sm" (click)="rasterizeJSON()">
                        <i class="fa fa-refresh" aria-hidden="true"></i> Render to json</button>
                </div>
                <div class="card-body">
                    <pre>{{json}}</pre>
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>
</div>